<template>
	<div class="middle">
		<!-- 头部 -->
		<div class="top">
			<span class="teacher">教案管理 <i class="el-icon-arrow-right"></i></span>
			<span>创建教案</span>
			<span class="back" @click="back">返回</span>
		</div>
		<!-- 标题部分 -->
		<div class="create">
		   	教案名称:<el-input class="ipt" v-model="teacherPlan.motion" placeholder="请输入教案名称">{{teacherPlan.motion}}</el-input>
		   	上课班级：<template>
						<el-select class="class" v-model="gradeClass" placeholder="请选择班级">
							<el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</template>
			  课时：<el-input class="ipt" v-model="teacherPlan.class_hour" placeholder="请输入课时"></el-input>
		   	教材类别:<template>
						<el-select  class="class" v-model="teacherPlan.plan_type_id" placeholder="请选择教材类型">
							<el-option v-for="item in type_title" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</template>
			<el-button  class="btn" type="primary" size="small" @click="submit">保存</el-button>
		   	<!-- <el-button class="btn" type="danger" size="small">导出</el-button> -->
		</div>
		<!-- 主体部分-->
		<div class="text item">
			<form @submit.prevent="submit" id="test">
				<input type="hidden" name="one_img" id="one_img" :value="img">
				<input type="hidden" name="two_img" id="two_img" :value="img2">
				<input type="hidden" name="three_img" id="three_img" :value="img3" >
				<el-collapse v-model="activeName">
				  <el-collapse-item title="基本信息" name="1" class="text-title">
					<div>
						<h4><span class="circle"></span>教学内容</h4>
						<textarea name="contents" rows="5" cols="186" style= "background:transparent">{{teacherPlan.contents}}</textarea>
					</div>
					<div>
						<h4><span class="circle"></span>场地器材</h4>
						<textarea name="equipment" rows="5" cols="186" style= "background:transparent">{{teacherPlan.equipment}}</textarea>
					</div>
					<div>
						<h4><span class="circle"></span>教学目标</h4>
						<textarea name="target" rows="5" cols="186" style= "background:transparent">{{teacherPlan.target}}</textarea>
					</div>
					<div>
						<h4><span class="circle"></span>负荷目标</h4>
						<textarea name="load_target" rows="5" cols="186" style= "background:transparent">{{teacherPlan.load_target}}</textarea>
					</div>
					<div>
						<h4><span class="circle"></span>教学重点</h4>
						<textarea name="teaching_emphasis" rows="5" cols="186" style= "background:transparent">{{teacherPlan.teaching_emphasis}}</textarea>
					</div>
					<div>
						<h4><span class="circle"></span>教学难点</h4>
						<textarea name="difficulty" rows="5" cols="186" style= "background:transparent">{{teacherPlan.difficulty}}</textarea>
					</div>
					<div>
						<h4><span class="circle"></span>安全措施</h4>
						<textarea name="security" rows="5" cols="186" style= "background:transparent">{{teacherPlan.security}}</textarea>
					</div>
				  </el-collapse-item>
				  <el-collapse-item title="教学阶段-开始部分" name="2">
					<div id="start" v-for="item in teacherPlan.start_part">
						<div class="someTime">
							<span class="time">总时长:</span>
							<input name="one_count_minute" type="text" class="title" v-model="teacherPlan.one_count_minute">
							<span class="time">分钟</span>
						</div>
						<div class="div_child">
							<div>
								<h4 class="text-content">标题</h4>
								<input name="one_title[]" type="text" class="title" v-model="item.one_title">
							</div>
							<div>
								<h4><span class="circle"></span>教学内容</h4>
								<textarea name="one_contents[]" cols="186" rows="5" style= "background:transparent">{{item.one_contents}}</textarea>
							</div>
							<div>
								<h4><span class="circle"></span>教师活动</h4>
								<textarea name="one_activity[]" rows="5" cols="186" style= "background:transparent">{{item.one_activity}}</textarea>
							</div>
							<div>
								<h4><span class="circle"></span>学生活动</h4>
								<textarea name="one_s_activity[]" rows="5" cols="186" style= "background:transparent">{{item.one_s_activity}}</textarea>
							</div>
							<div v-if = "!item.one_img?false:true">
								<h4><span class="circle"></span>组织形式</h4>
								<div>
									<el-upload
										:headers="header"
										:action="imgPath"
										list-type="picture-card"
										:on-preview="handlePictureCardPreview1"
										:on-remove="handleRemove1"
										:limit ='1'
										:on-success="success">
										<i class="el-icon-plus"></i>
									</el-upload>
									<el-dialog :visible.sync="dialogVisible">
										<img width="100%" :src="dialogImageUrl" alt="">
									</el-dialog>
								</div>
								<div class="tupian2"><img :src="item.one_img"/></div>
							</div>
						</div>
					</div>
				  </el-collapse-item>
				  <el-collapse-item title="教学阶段-准备部分" name="3">
					<div id="preparation" v-for="item in teacherPlan.preparation_part">
						<div class="someTime">
							<span class="time">总时长:</span>
							<input name="two_count_minute" type="text" class="title" v-model="teacherPlan.two_count_minute">
							<span class="time">分钟</span>
						</div>
						<div class="div_child">
							<h4 class="text-content">标题</h4>
							<input name="two_title[]" type="text" class="title" v-model="item.two_title">
						</div>
						<div>
							<h4><span class="circle"></span>教学内容</h4>
							<textarea name="two_contents[]" cols="186" rows="5" style= "background:transparent">{{item.two_contents}}</textarea>
						</div>
						<div>
							<h4><span class="circle"></span>教师活动</h4>
							<textarea name="two_activity[]" rows="5" cols="186" style= "background:transparent">{{item.two_activity}}</textarea>
							<!--<div contenteditable="true" v-html="item.two_activity"></div>-->
						</div>
						<div>
							<h4><span class="circle"></span>学生活动</h4>
							<textarea name="two_s_activity[]" rows="5" cols="186" style= "background:transparent">{{item.two_s_activity}}</textarea>
						</div>
						<div  v-if = "!item.two_img?false:true">
							<h4><span class="circle"></span>组织形式</h4>
							<div>
								<el-upload
									:headers="header"
									:action="imgPath"
									list-type="picture-card"
									:on-preview="handlePictureCardPreview2"
									:on-remove="handleRemove2"
									:limit ='1'
									:on-success="success2">
									<i class="el-icon-plus"></i>
								</el-upload>
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="dialogImageUrl" alt="">
								</el-dialog>
							</div>
							<div class="tupian2"><img :src="item.two_img"/></div>
						</div>
					</div>
				  </el-collapse-item>
				  <el-collapse-item title="教学阶段-基本部分" name="4">
					<div  id ="basic" v-for="item in teacherPlan.basic_part">
						<div class="someTime">
							<span class="time">总时长:</span>
							<input name="three_count_minute" type="text" class="title" v-model="teacherPlan.three_count_minute">
							<span class="time">分钟</span>
						</div>
						<div>
							<h4 class="text-content">标题</h4>
							<input name="three_title[]" type="text" class="title" v-model="item.three_title">
						</div>
						<div>
							<h4><span class="circle"></span>教学内容</h4>
							<textarea name="three_contents[]" cols="186" rows="5" style= "background:transparent">{{item.three_contents}}</textarea>
						</div>
						<div>
							<h4><span class="circle"></span>教师活动</h4>
							<textarea name="three_activity[]" rows="5" cols="186" style= "background:transparent">{{item.three_activity}}</textarea>
							<!--<div contenteditable="true" v-html="item.three_activity"></div>-->
						</div>
						<div>
							<h4><span class="circle"></span>学生活动</h4>
							<textarea name="three_s_activity[]" rows="5" cols="186" style= "background:transparent">{{item.three_s_activity}}</textarea>
						</div>
						<div v-if = "!item.three_img?false:true">
							<h4><span class="circle"></span>组织形式</h4>
							<div class="tupian">
								<el-upload
									:headers="header"
									:action="imgPath"
									list-type="picture-card"
									:on-preview="handlePictureCardPreview3"
									:on-remove="handleRemove3"
									:limit ='3'
									:on-success="success3">
									<i class="el-icon-plus"></i>
								</el-upload>
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="dialogImageUrl" alt="">
								</el-dialog>
							</div>
							<div class="tupian2"><img :src="item.three_img"/></div>
						</div>
					</div>
				  </el-collapse-item>
				  <el-collapse-item title="教学阶段-结束部分" name="5">
					<div>
						<div class="someTime">
							<span class="time">总时长:</span>
							<input name="end_count_minute" type="text" class="title" v-model="teacherPlan.end_count_minute">
							<span class="time">分钟</span>
						</div>
						<div>
							<h4><span class="circle"></span>教学内容</h4>
							<textarea name="four_contents" cols="186" rows="5" style= "background:transparent">{{teacherPlan.four_contents}}</textarea>
						</div>
						<div>
							<h4><span class="circle"></span>教师活动</h4>
							<textarea name="four_activity" rows="5" cols="186" style= "background:transparent">{{teacherPlan.four_activity}}</textarea>
						</div>
						<div>
							<h4><span class="circle"></span>学生活动</h4>
							<textarea name="four_s_activity" rows="5" cols="186" style= "background:transparent">{{teacherPlan.four_s_activity}}</textarea>
						</div>
					</div>
				  </el-collapse-item>
				</el-collapse>
			</form>
		</div>
	</div>
</template>
<script>
	export default{
		data() {
			return {
				 imgPath:'http://pcprograme.tijian121.com/api/common/t_plan_upload_img',
				//imgPath:'http://192.168.1.118/common/t_plan_upload_img',
				header: {
          'token': window.sessionStorage.getItem('token')
				},
				plan:'',//教案名称
				classOptions:[],//存放上课班级
				classNum:'',//课时
				activeName:['1','2','3','4','5'],//折叠面板
				dialogImageUrl: '',//图片上传
				dialogVisible: false,//图片上面板
				basic:[],//存放基本信息
				contentList:[],//存放教案
				type_title:[],//存放教案类别
				img:'',//上传成功后的图片地址
				imgs1:'',
				img2:'',
				imgs2:'',
				img3:'',
				imgs3:'',
				teacherPlan:[{
					four_contents:'',
					four_activity:'',
					four_s_activity:'',
				}],//存放编辑所有信息
				gradeClass:'',//班级id
				id:'',//当前教案id

			}
		},
		methods: {
			//获取某个教师教案
			getTeacherPlan(){
				//获取地址栏id
				this.id = this.$route.params.id
				this.$http.post('/api/t_plan/editTeacherPlan',{
					id:this.id
				}).then(res=>{
					this.teacherPlan = res.data.data
					this.gradeClass = res.data.data.grade_id+'|'+res.data.data.grade_class_id
					this.teacherPlan.four_contents = res.data.data.end_part.four_contents
					this.teacherPlan.four_activity = res.data.data.end_part.four_activity
					this.teacherPlan.four_s_activity = res.data.data.end_part.four_s_activity
					this.teacherPlan.start_part.map(item=>{
						this.img = item.one_img
						this.imgs1 = item.one_img
					})
					this.teacherPlan.preparation_part.map(item=>{
						this.img2 = item.two_img
						this.imgs2 = item.two_img
					})
					this.teacherPlan.basic_part.map(item=>{
						this.img3 = item.three_img
						this.imgs3 = item.three_img
					})

				})
			},
			//修改某个教师教案
			submit(){
				var token = window.sessionStorage.getItem('token')
				var formParam = $('#test').serialize()
				$.ajax({
					headers:{'token':token},
					url:'http://pcprograme.tijian121.com/api/t_plan/updateTeacherPlan',
					data:'id='+this.id+
						 '&plan_type_id='+this.teacherPlan.plan_type_id+
						 '&motion='+this.teacherPlan.motion+
						 '&class_info='+this.gradeClass+
						 '&'+formParam+
						 '&class_hour='+this.teacherPlan.class_hour,
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						if(data.code == 200) {
							alert(data.msg)
						}
						window.history.go(-1)
					},
					error:function(xhr,type,errorThrown){

					}
				});
			},
			//班级数据
			getClassInfo(){
				this.$http.post('/api/course_plan/getTeacherClassInfo')
					.then(res=>{
						res.data.class_info.map(item=>{
							var obj ={}
							obj.label =item.get_grade.grade_title + item.class_name
							obj.value =  item.get_grade.id +'|'+item.id
							this.classOptions.push(obj)
						})
					})
			},
			//获取教案类别
			//获取搜索信息
			getSearchInfo(){
				this.$http.post('/api/teacher_plan/getSearchInfo')
					.then(res=>{
						res.data.type_title.map(item =>{
							var obj ={}
							obj.label = item.title
							obj.value = item.id
							this.type_title.push(obj)
						})
					})
			},
			//返回上一页
			back(){
				this.$router.push({name:'plan'})
			},
			//上传图片
			handleRemove1(file, fileList) {
				$('#one_img').val(this.imgs1)
			},
			handlePictureCardPreview1(file) {
				this.dialogImageUrl =file.url;
				this.dialogVisible = true;
			},
			handleRemove2(file, fileList) {
				$('#two_img').val(this.imgs2)
			},
			handlePictureCardPreview2(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleRemove3(file, fileList) {
				$('#three_img').val(this.imgs3)
			},
			handlePictureCardPreview3(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			//上传图片成功
			success(response,file, fileList){
				this.img =response.img
			},
			success2(response,file, fileList){
				this.img2 =response.img
			},
			success3(response,file, fileList){
				this.img3 =response.img
			}

		},
		created() {
			this.getTeacherPlan()
			this.getClassInfo()
			this.getSearchInfo()
		}
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
	.el-dialog__body {
		padding: 0px 20px;
	}
	.el-card__body {
		padding: 0 20px !important;
	}
	.el-collapse-item__header{
	 	height: 30px !important;
	 	background-color:#9cbf83 !important;
	 	padding-left: 20px !important;
	 	color: #000000 !important;
	 	font-weight: 700 !important;
	 	font-size: 16px !important;
	  }
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.teacher {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.addteacher {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 180px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.create {
		margin: 10px;
		.ipt{
			width: 180px;
		}
		.btn {
			margin-left:10px;
		}
	}
	.text {
		padding: 0 20px;
		h4 {
			padding:5px 0;
			.circle {
				display: inline-block;
				width: 8px;
				height: 8px;
				background: #666666;
				border-radius: 4px;
				margin-right:10px;
			}
		}
		.addModel {
			margin: 10px;
			font-size: 18px;
			cursor: pointer;
			i {
				color:palevioletred;
			}
		}
		.someTime {
			.time {
				display: inline-block;
				font-size: 20px;
				font-weight: 600;
				margin-top: 10px;
			}
			.title {
				width: 50px;
				height: 25px;
			}
		}
		#start{
			.div_child {
				.text-content {
					color: #00b02d;
					font-weight: 700;
					display: inline-block;
					padding: 10px 0;
					font-size: 16px;
				}
				.title {
					height: 30px;
				}
				textarea {
					width: 98%;
					padding: 5px;
					overflow-y:visible;
				}
				.tupian {
					width: 200px;
					img {
						width: 200px;
					}
				}
			}
		}
		#preparation, #basic {
			.text-content {
				color: #00b02d;
				font-weight: 700;
				display: inline-block;
				padding: 10px 0;
				font-size: 16px;
			}
			.title {
				height: 30px;
			}
		}
		.tupian2 {
			width: 200px;
			margin-top: 10px;
			img{
				width: 100%;
			}
		}

	}
</style>

